<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>反选全选光棒效果</title>
		<meta charset="utf-8" />
		<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
		<style type="text/css">
			.style1 {
				width: 50%;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				$("#tb>tbody>tr:odd").hover().css("background-color", "#abf3e4");
				$("#tb>tbody>tr:even").css("background-color", "#46e7bf");

				//1、全选按钮添加点击事件
				//2、获取当前全选按钮的checked属性状态
				//3、获取下方所有单选框并将checked属性更改为2中获取的全选按钮的选中状态

				$("#chkAll").click(function() {
					var stata = $(this).attr("checked")
					$("input[name='chkItem']").attr("checked", stata)
				})

				//4、返选按钮添加点击事件
				//5、遍历（each）下方所有的单选框
				//6、当被遍历时，获取当前单选框的checked属性更改为当前checked相反的值
				$("#chkRev").click(function() {
					$("input[name='chkItem']").each(function() {
						var res = $(this).attr("checked")
						$(this).attr("checked", !res)
					})
				})

				//光棒效果(移入颜色为#c07df7  移出颜色为原本颜色)
				//1、获取原本tr行的颜色值
				//2、设置自定义属性bg，并把原来的颜色赋值给它
				//3、将最新的颜色 赋值给当前tr行

				//1、取出存在bg属性的颜色
				//2、给当前tr赋值bg里面存的颜色
				var bgcol;
				$("#tb tr").hover(function() {
					bgcol = $(this).css("background-color")
					$(this).css("background-color", "#c07df7")
				}, function() {
					$(this).css("background-color", bgcol)
				})

			});
		</script>
	</head>
	<body>
		<div style="background-color:Green"></div>
		<div>
			<input id="chkAll" type="checkbox" />全选
			<input id="chkRev" type="checkbox" />返选
		</div>
		<div>

			<table id="tb" class="style1">
				<tbody>
					<tr>
						<td>
							<input class="chk" name="chkItem" type="checkbox" id="chkid" bg="red" />
						</td>
						<td>
							ADC
						</td>
						<td>
							金克斯
						</td>
					</tr>
					<tr>
						<td>
							<input class="chk" name="chkItem" type="checkbox" />
						</td>
						<td>
							辅助
						</td>
						<td>
							布隆
						</td>
					</tr>
					<tr>
						<td>
							<input class="chk" name="chkItem" type="checkbox" />
						</td>
						<td>
							法师
						</td>
						<td>
							安妮
						</td>
					</tr>
					<tr>
						<td>
							<input class="chk" name="chkItem" type="checkbox" />
						</td>
						<td>
							上单
						</td>
						<td>
							螃蟹
						</td>
					</tr>
					<tr>
						<td>
							<input class="chk" name="chkItem" type="checkbox" />
						</td>
						<td>
							打野
						</td>
						<td>
							盲僧
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
